<template>
  <el-container class="h-100">
    <el-aside class="aside-menu" width="220px" style="background-color: #FFFFFF">
      <el-menu class="h-100" background-color="#FFFFFF" text-color="#333333" active-text-color="#1976D2" :default-active="$route.name" @select="index => this.$router.push({name: index})">
        <el-menu-item index="yearChange">
          <svg-icon icon-class="zuzhijigou"></svg-icon>
          <span slot="title">年度变更</span>
        </el-menu-item>
        <el-menu-item index="landLaw">
          <svg-icon icon-class="tongji3"></svg-icon>
          <span slot="title">土地卫片执法</span>
        </el-menu-item>
        <el-menu-item index="supervision">
          <svg-icon icon-class="jingfei"></svg-icon>
          <span slot="title">耕地监测监管</span>
        </el-menu-item>

        <el-menu-item index="naturalResources">
          <svg-icon icon-class="gongzuohuibao"></svg-icon>
          <span slot="title">资源保护区监管</span>
        </el-menu-item>
        
      </el-menu>
    </el-aside>
    <el-main class="bg-gray supervise-container">
      <transition name="fade-transform" mode="out-in">
        <router-view />
      </transition>
    </el-main>
  </el-container>
</template>
<script>
export default {
  title: "扩展业务",
  data() {
    return {};
  }
};
</script>
<style lang='scss'>
.supervise-container {
  // background: #fcfcfd;
  padding: 0;
}
.whole-process-container {
  // width: 80%;
  margin: 0 auto;
  background: #fff;
  padding: 0.75rem 1.125rem;
}
.el-collapse-item__header {
  font-size: 16px;
  font-weight: 500;
  background-color: #fcfcfd;
  padding: 0px 10px;
}
</style>